// 新建消息对话框
import React from 'react';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';



import { makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import InputBase from '@material-ui/core/InputBase';
import TextareaAutosize from '@material-ui/core/TextareaAutosize';
import addImage from '../../../assets/images/+@2x.png';
import uploadFile from '../../../assets/utils/uploadFile'

const useStyles = makeStyles(theme => ({
  root: {
    width: '100%',
    marginTop: theme.spacing(3),
    overflowX: 'auto',
  },
  table: {
    width: '100%',
  },
  everyCell:{
    padding:theme.spacing(1.5),
    position:'relative',
  },
  cell1:{
    width:100,
    // borderRight:'1px solid #ddd'
  },
  input:{
    width:'100%',
    fontSize:'14px'
  }
}));

function createData(name, calories, fat, carbs, protein) {
  return { name, calories, fat, carbs, protein };
}

const rows = [
  createData('Gingerbread', 356),
  createData('Gingerbread', 356),
];

function SimpleTable(props) {
  const classes = useStyles();
  let upLoadDom = React.createRef();
  function handleFileChange(e){
    let file = e.target.files[0];
    // console.log(e.target.files);
    uploadFile(file,{
      complete(pic){
        console.log(pic);
        props.handleValueChange('pic',pic)
      }
    })

  }

  return (
    <Paper className={classes.root}>
      <Table className={classes.table}>
        <TableBody>
            <TableRow>
              <TableCell className={`${classes.cell1} ${classes.everyCell}`} align="right">
                {props.baseText.titleName}
              </TableCell>
              <TableCell className={classes.everyCell}>
              <InputBase
                className={classes.input}
                placeholder={props.baseText.titlePlaceholder}
                inputProps={{ 'aria-label': props.baseText.titlePlaceholder }}
                value={props.dialogData.title}
                onChange={event => props.handleValueChange('title',event.target.value)}
              />
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCell className={classes.everyCell} align="right">
                {props.baseText.titleName.indexOf('活动') != -1 ? '活动封面' : '二维码'}
              </TableCell>
              <TableCell className={classes.everyCell}>
                <img style={{width:'80px',height:'80px'}} src={props.dialogData.pic || addImage} alt="" onClick={() => console.log(upLoadDom.current.click())} />
                <input ref={upLoadDom} type="file" accept="image/*" style={{display:'none'}} onChange={handleFileChange} />
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCell className={classes.everyCell} align="right">
                添加链接
              </TableCell>
              <TableCell className={classes.everyCell}>
                <InputBase
                  className={classes.input}
                  placeholder={props.baseText.linkPlaceholder}
                  inputProps={{ 'aria-label': props.baseText.linkPlaceholder }}
                  value={props.dialogData.link}
                  onChange={event => props.handleValueChange('link',event.target.value)}
                />
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCell className={classes.everyCell} align="right">
                内容简介
              </TableCell>
              <TableCell className={classes.everyCell}>
                <InputBase
                  className={classes.input}
                  placeholder={props.baseText.littleContentPlaceholder}
                  inputProps={{ 'aria-label': props.baseText.littleContentPlaceholder }}
                  value={props.dialogData.smallContent}
                  onChange={event => props.handleValueChange('smallContent',event.target.value)}
                />
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCell className={classes.everyCell} align="right">
                活动详情
              </TableCell>
              <TableCell className={classes.everyCell} style={{overflow:'hidden'}}>
                <TextareaAutosize 
                  aria-label="minimum height" 
                  rows={10} style={{width:'100%'}} 
                  placeholder={props.baseText.contentPlaceholder} 
                  value={props.dialogData.content} 
                  onChange={event => props.handleValueChange('content',event.target.value)}
                />
              </TableCell>
            </TableRow>
        </TableBody>
      </Table>
    </Paper>
  );
}


export default function ScrollDialog(props) {
  const [open, setOpen] = React.useState(false);
  const [scroll, setScroll] = React.useState('paper');
  const [fullWidth, setFullWidth] = React.useState(true);
  const [maxWidth, setMaxWidth] = React.useState('sm');

  const handleClickOpen = scrollType => () => {
    setOpen(true);
    setScroll(scrollType);
  };

  function handleClose() {
    setOpen(false);
  }

  return (
    <div>
      <Dialog
        fullWidth={fullWidth}
        maxWidth={maxWidth}
        open={props.show}
        onClose={props.onClose}
        scroll={scroll}
        aria-labelledby="scroll-dialog-title"
      >
        <DialogTitle id="scroll-dialog-title">{props.baseText.dialogTitle}</DialogTitle>
        <DialogContent dividers={scroll === 'paper'}>
          <SimpleTable {...props} />
        </DialogContent>
        <DialogActions>
          <Button onClick={props.cancel} color="primary">
            取消
          </Button>
          <Button onClick={props.save} color="primary">
            保存
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}